.website-examples-list.neo-list-container.neo-list {
    transition: padding v(website-transition-duration) ease-out;

    .neo-list-item {
        cursor     : default;
        display    : flex;
        max-width  : 800px;
        overflow   : hidden;
        padding    : 0;
        transition : height v(website-transition-duration) ease-out, margin-bottom v(website-transition-duration) ease-out;
        white-space: normal;
        width      : 100%;

        .content {
            flex: 1;
        }

        .neo-absolute {
            position: absolute;
        }

        .neo-full-size {
            height: 100%;
            width : 100%;
        }

        .neo-github-image {
            color                     : #ddd;
            text-decoration           : none;
            transition-duration       : v(website-transition-duration);
            transition-property       : font-size, height, width;
            transition-timing-function: ease-out;
        }

        .neo-inner-content {
            color      : #fff;
            display    : inline-block;
            margin-left: 10px;
            text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;
            transition : font-size v(website-transition-duration) ease-out;
        }

        .neo-inner-details {
            transition: line-height v(website-transition-duration) ease-out;
        }

        .neo-item-bottom-position {
            bottom    : 0;
            left      : 0;
            transition: margin v(website-transition-duration) ease-out;
        }

        .neo-relative {
            position: relative;
        }

        .neo-title {
            color          : #fff;
            font-weight    : 600;
            line-height    : 1;
            text-decoration: none;
            text-shadow    : 1px 1px 1px #000, 1px 1px 1px #fff;
            transition     : color 250ms ease-out;

            &:hover {
                color: #5d83a7
            }
        }

        .neo-top-20 {
            align-items: center;
            display    : flex;
            transition : margin v(website-transition-duration) ease-out;
        }

        .preview-image {
            background-blend-mode: overlay;
            background-size      : cover;
            height               : 100%;
        }
    }

    @media (max-height: 400px), (max-width: 600px) {
        padding: 5px 5px 0 5px;

        .neo-github-image {
            font-size: 30px;
            height   : 30px;
            width    : 30px;
        }

        .neo-inner-content {
            font-size: 12px;
        }

        .neo-inner-details {
            line-height: 16px;
        }

        .neo-item-bottom-position {
            margin: 9px 12px;
            right : 15%;
        }

        .neo-list-item {
            border-radius: 10px;
            height       : 200px;
            margin-bottom: 5px;
        }

        .neo-title {
            font-size: 20px;
        }

        .neo-top-20 {
            margin-top: 10px;
        }
    }

    @media (min-height: 401px) and (min-width: 601px) {
        padding: 10px 10px 0 10px;

        .neo-github-image {
            font-size: 44px;
            height   : 44px;
            width    : 44px;
        }

        .neo-inner-content {
            font-size: 16px;
        }

        .neo-inner-details {
            font-size  : 16px;
            line-height: 22px;
        }

        .neo-item-bottom-position {
            margin: 30px 40px;
            right : 30%;
        }

        .neo-list-item {
            border-radius: 20px;
            height       : 400px;
            margin-bottom: 10px;
        }

        .neo-title {
            font-size: 34px;
        }

        .neo-top-20 {
            margin-top: 20px;
        }
    }
}